<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>幸运抽奖</title>

    <!-- 本地Tailwind CSS -->
    <script src="js/tailwind.js"></script>

    <!-- 本地Font Awesome -->
    <link rel="stylesheet" href="css/font-awesome.css"/>

    <!-- 本地Chart.js -->
    <script src="js/chart.umd.min.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#E63946', // 喜庆红色
                        secondary: '#FFD700', // 金色
                        accent: '#4CC9F0', // 科技蓝
                        dark: '#1D3557', // 深蓝色
                        light: '#F1FAEE', // 浅灰白
                        success: '#22C55E',
                        danger: '#EF4444',
                        warning: '#F59E0B',
                        info: '#3B82F6'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        display: ['Orbitron', 'sans-serif']
                    },
                    animation: {
                        'spin-slow': 'spin 3s linear infinite',
                        'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 3s ease-in-out infinite',
                        'glow': 'glow 2s ease-in-out infinite alternate',
                        'slide-up': 'slideUp 0.5s ease-out forwards',
                        'scale-in': 'scaleIn 0.3s ease-out forwards',
                        'confetti': 'confetti 3s ease-out forwards',
                        'particle': 'particle 5s ease-in-out infinite'
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': {transform: 'translateY(0)'},
                            '50%': {transform: 'translateY(-10px)'}
                        },
                        glow: {
                            '0%': {boxShadow: '0 0 5px rgba(230, 57, 70, 0.7)'},
                            '100%': {boxShadow: '0 0 20px rgba(230, 57, 70, 0.7), 0 0 30px rgba(255, 215, 0, 0.5)'}
                        },
                        slideUp: {
                            '0%': {transform: 'translateY(20px)', opacity: '0'},
                            '100%': {transform: 'translateY(0)', opacity: '1'}
                        },
                        scaleIn: {
                            '0%': {transform: 'scale(0.8)', opacity: '0'},
                            '100%': {transform: 'scale(1)', opacity: '1'}
                        },
                        confetti: {
                            '0%': {transform: 'translateY(0) rotate(0deg)', opacity: '1'},
                            '100%': {transform: 'translateY(-1000px) rotate(720deg)', opacity: '0'}
                        },
                        particle: {
                            '0%, 100%': {transform: 'translate(0, 0)', opacity: '0.3'},
                            '50%': {transform: 'translate(10px, -20px)', opacity: '0.8'}
                        }
                    }
                }
            }
        };
    </script>

    <!-- 本地样式表 -->
    <link rel="stylesheet" href="css/styles.css"/>

    <!-- 本地字体 -->
    <link href="fonts/orbitron.css" rel="stylesheet"/>
    <style>
        /* 紧凑布局 */
        .compact-layout {
            padding: 1rem;
        }

        /* 按钮样式优化 */
        .btn-highlight {
            color: #fff !important;
        }

        /* 下拉选项背景色 */
        .dropdown-item {
            background-color: #000033 !important;
        }

    </style>
</head>
<body class="bg-gradient-to-br from-dark to-black min-h-screen font-sans text-light overflow-x-hidden">

<!-- 粒子背景 -->
<div id="particles-bg" class="fixed inset-0 pointer-events-none z-0"></div>

<!-- 导航栏 -->
<nav class="bg-glass shadow-lg fixed w-full z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-gift text-secondary text-2xl animate-pulse-slow"></i>
            <h1 class="text-xl font-bold font-display text-white">幸运抽奖</h1>
        </div>
        <div class="flex items-center space-x-4">
            <button id="nav-draw"
                    class="px-4 py-2 rounded-md bg-gradient-red text-white hover:shadow-lg transition-all shadow-md hover:shadow-xl transform hover:-translate-y-0.5 btn-highlight">
                <i class="fa fa-random mr-1"></i> 抽奖页面
            </button>
            <button id="nav-settings"
                    class="px-4 py-2 rounded-md bg-glass text-white hover:bg-primary/20 transition-all shadow hover:shadow-md transform hover:-translate-y-0.5 btn-highlight">
                <i class="fa fa-cog mr-1"></i> 配置页面
            </button>
            <button id="nav-reset"
                    class="px-4 py-2 rounded-md bg-glass text-white hover:bg-primary/20 transition-all shadow hover:shadow-md transform hover:-translate-y-0.5 btn-highlight">
                <i class="fa fa-refresh mr-1"></i> 重置
            </button>
        </div>
    </div>
</nav>

<!-- 主体内容 -->
<main class="container mx-auto px-2 pt-10 pb-0 min-h-screen relative z-10 compact-layout  ">
    <!-- 抽奖页面 -->
    <section id="draw-page" class="py-4 ">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- 左侧抽奖区 -->
            <div class="lg:col-span-2">
                <div class="bg-glass rounded-xl shadow-lg p-4 h-full flex flex-col compact-layout">
                    <!-- 抽奖控制 -->
                    <div class="flex flex-col sm:flex-row gap-2 mt-4 w-full">
                        <select id="prize-select"
                                class="px-4 py-2 rounded-lg bg-glass border border-white/20 text-white focus:border-secondary focus:ring focus:ring-secondary/20 transition-all shadow hover:shadow-md dropdown-item">
                            <option value="">请选择奖项</option>
                        </select>
                        <div class="flex-grow"></div>
                        <button id="draw-btn"
                                class="px-4 py-2 bg-gradient-red text-blue-500 rounded-lg shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center transform hover:-translate-y-1 hover:shadow-lg btn-highlight">
                            <i class="fa fa-play mr-2 text-blue-500"></i> 开始抽奖
                        </button>
                        <button id="draw-all-btn"
                                class="px-4 py-2 bg-gradient-gold text-blue-500 rounded-lg shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center transform hover:-translate-y-1 hover:shadow-lg btn-highlight">
                            <i class="fa fa-bolt mr-2 text-blue-500"></i> 一键抽完
                        </button>
                    </div>
                    <!-- 当前奖项 -->
                    <div class="mb-4 text-center">
                        <div class="inline-block px-4 py-2 bg-gradient-gold rounded-full mb-2 animate-scale-in">
                            <span class="text-dark font-semibold font-display" id="current-prize-name">当前奖项</span>
                        </div>
                        <p class="text-gray-300" id="current-prize-info">剩余名额: <span id="remaining-count">0</span>
                        </p>
                    </div>
                    <!-- 抽奖展示区 -->
                    <div class="flex-grow flex flex-col items-center justify-center mb-6">
                        <div class="relative w-full max-w-md aspect-square rounded-full shadow-2xl flex items-center justify-center overflow-hidden mb-4"
                             id="lottery-container">
                            <!-- 背景渐变 -->
                            <div class="absolute inset-0 bg-gradient-to-br from-primary/90 to-darkblue/90"></div>
                            <div class="absolute inset-4 rounded-full border-4 border-white/20"></div>
                            <div class="absolute inset-8 rounded-full border-4 border-white/10"></div>

                            <!-- 动态粒子 -->
                            <div class="absolute inset-0" id="lottery-particles"></div>

                            <!-- 结果显示 -->
                            <div id="lottery-result"
                                 class="text-[clamp(2rem,5vw,4rem)] font-bold font-display text-white text-shadow-glow relative z-10 transition-all duration-500">
                                ???
                            </div>

                            <!-- 动画装饰 -->
                            <div id="lottery-decor"
                                 class="absolute inset-0 pointer-events-none opacity-0 transition-opacity duration-500">
                                <div class="absolute top-0 left-0 w-full h-full">
                                    <div class="confetti bg-red-400"
                                         style="left: 10%; top: 10%; animation: confetti 3s ease-out forwards 0.1s;"></div>
                                    <div class="confetti bg-yellow-400"
                                         style="left: 20%; top: 5%; animation: confetti 3.2s ease-out forwards 0.2s;"></div>
                                    <div class="confetti bg-blue-400"
                                         style="left: 30%; top: 15%; animation: confetti 3.4s ease-out forwards 0.3s;"></div>
                                    <div class="confetti bg-green-400"
                                         style="left: 40%; top: 8%; animation: confetti 3.6s ease-out forwards 0.4s;"></div>
                                    <div class="confetti bg-purple-400"
                                         style="left: 50%; top: 12%; animation: confetti 3.8s ease-out forwards 0.5s;"></div>
                                    <div class="confetti bg-pink-400"
                                         style="left: 60%; top: 7%; animation: confetti 4s ease-out forwards 0.6s;"></div>
                                    <div class="confetti bg-teal-400"
                                         style="left: 70%; top: 14%; animation: confetti 4.2s ease-out forwards 0.7s;"></div>
                                    <div class="confetti bg-orange-400"
                                         style="left: 80%; top: 9%; animation: confetti 4.4s ease-out forwards 0.8s;"></div>
                                </div>
                            </div>

                            <!-- 光晕效果 -->
                            <div class="absolute inset-0 rounded-full bg-gradient-to-tr from-white/10 to-transparent opacity-50"></div>
                            <div class="absolute inset-0 rounded-full bg-gradient-to-bl from-white/10 to-transparent opacity-50"></div>
                        </div>


                    </div>
                    <!-- 音乐控制 -->
                    <div class="border-t border-white/10 pt-4 flex items-center justify-between">
                        <div class="flex items-center space-x-2">
                            <i class="fa fa-music text-secondary mr-1"></i>
                            <span class="text-sm text-gray-300">背景音乐</span>
                        </div>
                        <div class="flex items-center space-x-4">
                            <select id="bgm-select"
                                    class="px-3 py-1 rounded-lg bg-glass border border-white/20 text-white text-sm shadow hover:shadow-sm dropdown-item">
                                <option value="">无音乐</option>
                            </select>
                            <button id="bgm-test"
                                    class="px-3 py-1 rounded-lg bg-glass border border-white/20 text-white text-sm hover:bg-primary/20 transition-all shadow hover:shadow-sm btn-highlight">
                                <i class="fa fa-play"></i> 播放
                            </button>
                            <button id="bgm-stop"
                                    class="px-3 py-1 rounded-lg bg-glass border border-white/20 text-white text-sm hover:bg-primary/20 transition-all shadow hover:shadow-sm btn-highlight">
                                <i class="fa fa-stop"></i> 停止
                            </button>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 右侧中奖名单 -->
            <div class="lg:col-span-1">
                <div class="bg-glass rounded-xl shadow-lg p-4 h-full flex flex-col compact-layout">
                    <h2 class="text-xl font-bold font-display mb-4 text-white flex items-center">
                        <i class="fa fa-list-alt text-secondary mr-2"></i> 中奖名单
                    </h2>

                    <!-- 列表区域 -->
                    <div class="flex-grow overflow-y-auto mb-4" id="winners-container">
                        <div class="text-center text-gray-400 py-6 animate-float" id="empty-winners">
                            <i class="fa fa-inbox text-4xl mb-2 opacity-30"></i>
                            <p>暂无中奖记录</p>
                        </div>
                    </div>

                    <!-- 导出按钮 -->
                    <div class="border-t border-white/10 pt-4">
                        <button id="export-btn"
                                class="w-full py-2 bg-gradient-tech text-white rounded-lg shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center transform hover:-translate-y-1 hover:shadow-lg btn-highlight">
                            <i class="fa fa-download mr-2"></i> 导出中奖名单
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 配置页面 -->
    <section id="settings-page" class="py-4 hidden">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- 奖项设置 -->
            <div>
                <div class="bg-glass rounded-xl shadow-lg p-4 h-full compact-layout">
                    <h2 class="text-xl font-bold font-display mb-6 text-white flex items-center">
                        <i class="fa fa-gift text-secondary mr-2"></i> 奖项设置
                    </h2>

                    <!-- 添加奖项 -->
                    <div class="mb-6 p-4 bg-white/5 rounded-lg animate-scale-in">
                        <h3 class="font-semibold mb-3 text-white">添加奖项</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-1">奖项名称</label>
                                <input type="text" id="new-prize-name"
                                       class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-secondary/50 focus:border-secondary shadow hover:shadow-sm"
                                       placeholder="例如：一等奖"/>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-1">中奖名额</label>
                                <input type="number" id="new-prize-count" min="1"
                                       class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-secondary/50 focus:border-secondary shadow hover:shadow-sm"
                                       placeholder="例如：3"/>
                            </div>
                        </div>
                        <div class="mt-4">
                            <button id="add-prize-btn"
                                    class="px-4 py-2 bg-gradient-gold text-dark rounded-md shadow-md hover:shadow-lg transition-all transform hover:-translate-y-0.5 btn-highlight">
                                <i class="fa fa-plus mr-1"></i> 添加奖项
                            </button>
                        </div>
                    </div>

                    <!-- 奖项列表 -->
                    <div>
                        <h3 class="font-semibold mb-3 text-white">已设置奖项</h3>
                        <div class="space-y-3" id="prize-list">
                            <div class="text-center text-gray-400 py-6 animate-float" id="empty-prizes">
                                <i class="fa fa-inbox text-3xl mb-2 opacity-30"></i>
                                <p>暂无奖项，请添加</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 参与名单 & 音乐设置 -->
            <div class="space-y-6">
                <!-- 参与名单 -->
                <div class="bg-glass rounded-xl shadow-lg p-4 animate-scale-in compact-layout">
                    <h2 class="text-xl font-bold font-display mb-6 text-white flex items-center">
                        <i class="fa fa-users text-secondary mr-2"></i> 参与名单
                    </h2>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-300 mb-2">参与人员（每行一个）</label>
                        <textarea id="participants" rows="6"
                                  class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-secondary/50 focus:border-secondary shadow hover:shadow-sm"></textarea>
                    </div>

                    <div class="flex justify-between gap-2">
                        <button id="import-participants"
                                class="px-4 py-2 bg-white/10 border border-white/20 rounded-md text-white hover:bg-white/20 transition-all shadow hover:shadow-sm transform hover:-translate-y-0.5 btn-highlight">
                            <i class="fa fa-upload mr-1"></i> 导入名单
                        </button>
                        <button id="clear-participants"
                                class="px-4 py-2 bg-danger/20 text-danger rounded-md shadow hover:shadow-sm transition-all transform hover:-translate-y-0.5 btn-highlight">
                            <i class="fa fa-trash mr-1"></i> 清空名单
                        </button>
                        <button id="save-participants"
                                class="px-4 py-2 bg-gradient-red text-white rounded-md shadow-md hover:shadow-lg transition-all transform hover:-translate-y-0.5 btn-highlight">
                            <i class="fa fa-save mr-1"></i> 保存名单
                        </button>
                    </div>
                </div>

                <!-- 音乐设置 -->
                <div class="bg-glass rounded-xl shadow-lg p-4 animate-scale-in compact-layout">
                    <h2 class="text-xl font-bold font-display mb-6 text-white flex items-center">
                        <i class="fa fa-music text-secondary mr-2"></i> 音乐设置
                    </h2>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-300 mb-2">上传背景音乐（MP3格式）</label>
                        <div class="flex items-center space-x-4">
                            <input type="file" id="bgm-upload" accept="audio/mp3" class="hidden"/>
                            <button id="bgm-upload-btn"
                                    class="px-4 py-2 bg-white/10 border border-white/20 rounded-md text-white hover:bg-white/20 transition-all shadow hover:shadow-sm transform hover:-translate-y-0.5 btn-highlight">
                                <i class="fa fa-upload mr-1"></i> 选择音乐文件
                            </button>
                            <span id="bgm-filename" class="text-sm text-gray-400">未选择文件</span>
                        </div>
                    </div>

                    <div>
                        <h3 class="font-semibold mb-3 text-white">已上传音乐</h3>
                        <div class="space-y-3" id="bgm-list">
                            <div class="text-center text-gray-400 py-6 animate-float" id="empty-bgm">
                                <i class="fa fa-music text-3xl mb-2 opacity-30"></i>
                                <p>暂无上传的音乐</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-glass py-4 shadow-inner">
    <div class="container mx-auto px-2 text-center text-gray-400 text-sm">
        <p>© 2025 幸运抽奖 | @LIUHUAIKAI | 所有资源本地化，支持离线使用</p>
    </div>
</footer>

<!-- 音频元素 -->
<audio id="bgm-player" loop></audio>
<audio id="draw-sound" class="hidden">
    <source src="audio/mixkit-arcade-slot-machine-wheel-1933.wav" type="audio/mpeg"/>
</audio>
<audio id="win-sound" class="hidden">
    <source src="audio/xm3532.wav" type="audio/mpeg"/>
</audio>
<audio id="transition-sound" class="hidden">
    <source src="audio/mixkit-arcade-game-jump-coin-216.wav" type="audio/mpeg"/>
</audio>

<!-- JS 引用 -->
<script src="js/app.js"></script>
</body>
</html>
